<!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>-->
<!--<c:set var="path" value="${pageContext.request.contextPath}" />-->
<html>
<head>

<title>人脸登录</title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="人脸登录">

<link rel="stylesheet" type="text/css"
	href="/Medical_Instrument/statics/css/faceLogin.css" />
<script type="text/javascript"
	src="/Medical_Instrument/statics/js/login/jquery-1.12.4.js"></script>
<style>
body {
	height: 100%;
	background: #213838;
	overflow: hidden;
}

canvas {
	z-index: -1;
	position: absolute;
}
</style>
<script src="/Medical_Instrument/statics/js/login/jquery.js"></script>
<script src="/Medical_Instrument/statics/js/login/verificationNumbers.js"></script>
<script src="/Medical_Instrument/statics/js/login/Particleground.js"></script>
<script type="text/javascript"
	src="/Medical_Instrument/statics/lib/layer/2.4/layer.js"></script>
<script>
	$(document).ready(function() {
		//粒子背景特效
		$('body').particleground({
			dotColor : '#5cbdaa',
			lineColor : '#5cbdaa'
		});
	});
</script>


<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	background-position: center;
	overflow: hidden;
}

h1 {
	color: #fff;
	text-align: center;
	font-weight: 100;
	margin-top: 40px;
}

#media {
	width: 280px;
	height: 250px;
	margin: 10px auto 0;
	border-radius: 30px;
	overflow: hidden;
	opacity: 0.7px;
}

#video {
	
}

#canvas {
	display: none;
}

#btn {
	width: 160px;
	height: 50px;
	background: #BBFFFF;
	margin: 70px auto 0;
	text-align: center;
	line-height: 50px;
	color: #BBFFFF;
	border-radius: 40px;
}
</style>
</head>

<body>

	<form action="${path}/faceService/facelogin" method="POST">
		<dl class="admin_login">
			<dt>
				<strong>人脸登录</strong><em>Management System</em> <strong>请把你的脸放摄像头面前</strong>
			</dt>
			<div id="media">
				<video id="video" width="530" height="300" autoplay></video>
				<canvas id="canvas" width="400" height="300"></canvas>
			</div>
			<dd>
				<input type="button" onclick="query()" value="人脸登录"
					class="submit_btn" id="facelogin" />
			</dd>

		</dl>
		<script type="text/javascript">
			//var 是定义变量
			var video = document.getElementById("video"); //获取video标签
			var context = canvas.getContext("2d");
			var con = {
				audio : false,
				video : {
					width : 1980,
					height : 1024,
				}
			};

			//导航 获取用户媒体对象
			navigator.mediaDevices.getUserMedia(con).then(function(stream) {
				video.src = window.URL.createObjectURL(stream);
				video.onloadmetadate = function(e) {
					video.play();
				};
			});

			function query() {
				$("#facelogin").val("人脸检测中...");

				//把流媒体数据画到convas画布上去
				context.drawImage(video, 0, 0, 400, 300);
				var base = getBase64();

				$
						.ajax({
							type : "POST",
							url : "${path}/faceService/facelogin",
							data : {
								"base" : base
							},
							success : function(data) {
								var obj = JSON.parse(data);
								if (obj.result == "success") {
									location.href = "${path}/faceService/faceloginSuccess";
								} else if (obj.result == "no_liveness") {
									layer.msg("活体检测失败!", {
										icon : 5,
										time : 2000
									});
								} else if (obj.result == "false") {
									layer.msg("没有注册该人脸！", {
										icon : 5,
										time : 2000
									});
								} else if (obj.result == "error") {
									layer.msg("出错啦，请稍后再试或者联系管理员！", {
										icon : 5,
										time : 2000
									});
								} else {
									layer.msg("未知异常，请稍后再试或者联系管理员！", {
										icon : 5,
										time : 2000
									});
								}
								;
								$("#facelogin").val("人脸登录");
							}
						});

			}
			function getBase64() {
				var imgSrc = document.getElementById("canvas").toDataURL(
						"image/png");
				return imgSrc.split("base64,")[1];

			};
		</script>
	</form>
</body>
</html>
